<template>
	<view>
		<view style="width: 750rpx;height: 104rpx;margin-top: -20rpx;border-bottom: 1rpx solid #E5E5E5;">
			<uni-search-bar @confirm="search" @input="input()" placeholder="名称搜索" :radius="100" clearButton="none" cancelButton="none" bgColor="#F2F3F5"></uni-search-bar>
		</view>
		<view style="display: flex;">
			<scroll-view class="left" scroll-y >
				<view 
				@click="leftClick(index,item.id)"
				:class="active===index?'active':''" 
				v-for="(item,index) in currentcates " 
				:key="item.id" style="display: flex;">
				<view style="width: 8rpx;height: 32rpx;background-color:#388CFE ;margin-left: -48rpx;margin-right: 24rpx;margin-top: 32rpx;" v-if="active==index"></view>
				{{item.name}}</view>	
			</scroll-view>
			<scroll-view class="right" scroll-y>
				<view v-for="(item) in secondDate" :key="item" >
					<view :class="item.active?'view':'aaa'" @click="rightClick(item)" style="display: flex;">
						<view style="height: 96rpx;width: 510rpx;font-size: 28rpx;line-height: 96rpx;float: left;">{{item.name}}</view>
						<image v-if="item.active==true" style="float: right;margin-right: 28rpx;width: 44rpx;height: 44rpx;margin-top: 24rpx;" src="../../static/icon_success@3x.png"></image>
					</view> 
				</view>
			</scroll-view>
		</view>
		<view style="display: flex;position: fixed;bottom: 0;width: 750rpx;height: 120rpx;background-color: #FFFFFF;">
			<image src="../../static/icongou@3x.png" style="width: 44rpx;height: 44rpx;margin-left: 28rpx;margin-top: 38rpx;float: left;"></image>
			<view style="float: left;font-size: 32rpx;margin-left: 8rpx;margin-top: 44rpx;line-height: 32rpx;">已选择</view>
			<view style="float: left;color: #388CFE;font-size: 32rpx;line-height: 32rpx;margin-top: 44rpx;margin-left: 10rpx;">{{num}}</view>
			<button style="float: right;width: 460rpx;height: 94rpx;background-color: #519AFF;color: #FFFFFF;margin-top: 14rpx;margin-right: 28rpx;border-radius: 47rpx;" @click="goback()">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:0,
				cates:[],
				secondDate:[],
				id:'',
				active1:'',
				view:'',
				num:0,
				areaarr:[],
				real:'',
				real1:'',
				date:'',
				date1:'',
				userName:'',
				level:'',
				areaId:'',
				value:'',
			}
		},
		methods: {
			input(e){
				console.log(e);
				
				
			},
			search(res){
				console.log(res.value);
					console.log('1241251356125');
					this.$myRequest({
							url:'/project_flood/v1/owner_flood/page',
							data:{"areaId":this.areaId,"name":res.value}
						}).then((res)=>{
							this.secondDate= res.data.data.list;
							console.log(this.areaarr,'this.areaarr');
							console.log(this.secondDate,'this.secondDate');
							
							this.areaarr.map(e=>{
								let index = this.secondDate.findIndex(v=> v.id===e)
								console.log(index,'index');
								if(index !== -1){
									this.$set(this.secondDate[index],'active', true)
								}
							})
							// this.secondDate.forEach(e=>{
							// 	e.active = false
							// })
							
						});
				
				
			},
			async getName(){
				//console.log(2333333333);
				this.$myRequest({
					url:'/project_flood/v1/region/select',
					data:{"userId":"1195","level":5}
				}).then((res)=>{
					this.cates = res.data.data.children;
					this.id=this.cates[0].id;
					console.log(this.id);
					if(this.level==3){
						this.getName1()
					}else{
						this.getName2()
					}
					})
			},
			leftClick(index,id){
				// console.log(index,'---');
				this.active=index;
				this.id=id
				this.$myRequest({
						url:'/project_flood/v1/owner_flood/page',
						data:{"areaId":id}
					}).then((res)=>{
						this.secondDate= res.data.data.list;
						console.log(this.areaarr,'this.areaarr');
						console.log(this.secondDate,'this.secondDate');
						
						this.areaarr.map(e=>{
							let index = this.secondDate.findIndex(v=> v.id===e)
							console.log(index,'index');
							if(index !== -1){
								this.$set(this.secondDate[index],'active', true)
							}
						})
						// this.secondDate.forEach(e=>{
						// 	e.active = false
						// })
						
					});
				
			},
			rightClick(e){
				console.log(e,'eee');
				
				e.active = !e.active
				console.log(e.active);
				this.$forceUpdate()
				if(e.active==true){
					this.num++
					this.areaarr.push(e.id)
					
				}
				else{
					this.num--
					for(var i=0;i<=this.areaarr.length;i++){
						if(this.areaarr[i]==e.id){
							this.areaarr.splice(i,1)
						}
					}
				}
				// this.view=id
			},
			async getName1(){
				//console.log(2333333333);
				console.log(this.id);
				this.$myRequest({
					url:'/project_flood/v1/owner_flood/page',
					data:{"areaId":this.id}
				}).then((res)=>{
					console.log(res);
					this.secondDate = res.data.data.list;
					console.log(this.secondDate,'this.secondDate');
					this.secondDate && this.secondDate.forEach(e=>{
						e.active = false
					})
					})
			},
			async getName2(){
				//console.log(2333333333);
				this.$myRequest({
					url:'/project_flood/v1/owner_flood/page',
					data:{"areaId":this.areaId}
				}).then((res)=>{
					this.secondDate = res.data.data.list;
					console.log(this.secondDate,'this.secondDate');
					this.secondDate && this.secondDate.forEach(e=>{
						e.active = false
					})
					})
			},
			change(){
				this.active1=index
			},
			goback(){
				uni.redirectTo({
					url:`benjiJC?num=${this.num}&date2=${0}&real2=${false}&areaarr=${this.areaarr}&real=${this.real}&real1=${this.real1}&date=${this.date}&date1=${this.date1}&value=${this.value}`
				})
			}
		},
		
		onLoad(options) {
			try {
			    const X = uni.getStorageSync('userName');
				const Y = uni.getStorageSync('level');
				const Z = uni.getStorageSync('areaId');
				console.log(Y);
				this.userName=X;
				this.level=Y;
				this.areaId=Z;	
			    if (X,Y,Z) {
			        // console.log(X);
			    }
				
			} catch (e) {
			    // error
			}
			this.real=options.real
			this.real1=options.real1
			this.date=options.date
			this.date1=options.date1
			this.value=options.value
			console.log(options,'options');
			this.areaarr = options.areaarr.split(',')
			this.num=this.areaarr.length
			
			
		},
		onShow() {
			this.getName()
		},
		computed:{
			currentcates(){
				var list = this.cates.filter(item=>{
					return item.name==this.userName
				})
				
				if(this.level==3){
					return this.cates
					
				}
				else{
					return list
				}
			}
		}
		
	}
</script>

<style lang="scss">
	scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
	}
.left{
		
		width:240rpx;
		height: 86vh;
		background-color: #F2F3F5;
		// border-right: 1px solid #eee;
		view{
			height: 96rpx;
			line-height: 96rpx;
			color: #333;
			padding-left: 24rpx;
			font-size: 28rpx;
			// border-bottom: 1px solid #eee;	
			background-color: #f5f5f5;
		}
		
		.active{
			background-color: #ffffff;
		}
}
.right{
	width: 510rpx;
	height: 94vh;
	margin-left: 24rpx;
	
}

.view{
	height: 96rpx;
	width: 510rpx;
	font-size: 28rpx;
	line-height: 96rpx;
	color: #388CFE;
}
</style>
